import React from 'react'
import PropTypes from 'prop-types'
import {
  View,
  StyleSheet,
  Text
} from 'react-native'
import { WIDTH, ScaleS, IS_IPHONEX } from 'src/utils/ScreenUtil'
import CustomImage from '../image/CustomImage'
import CustomButton from 'src/components/button/CustomButton'

export default class ChatOptionModal extends React.Component {
  static defaultProps = {
  }

  static propTypes = {
    canCallPhone: PropTypes.bool,
    onCall: PropTypes.func,
    onShowImgOption: PropTypes.func
  }

  render () {
    const { canCallPhone, onCall, onShowImgOption } = this.props
    return (
      <View style={styles.container}>
        <CustomButton style={styles.item} onPress={onCall}>
          <CustomImage
            style={styles.itemImg}
            source={canCallPhone ? require('src/imgC/message/phone.png') : require('src/imgC/message/cant_call.png')}
          />
          <Text style={[styles.itemText, canCallPhone && styles.lightText]}>电话</Text>
        </CustomButton>
        <CustomButton style={styles.item} onPress={onShowImgOption}>
          <CustomImage
            style={styles.itemImg}
            source={require('src/imgC/message/chat_img.png')}
          />
          <Text style={styles.itemText}>图片</Text>
        </CustomButton>
        <CustomButton style={styles.item}>
          <CustomImage
            style={styles.itemImg}
            source={require('src/imgC/message/more_posts.png')}
          />
          <Text style={styles.itemText}>更多岗位</Text>
        </CustomButton>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    width: WIDTH,
    height: ScaleS(IS_IPHONEX ? 160 : 140),
    backgroundColor: '#F2F2F2',
    borderTopLeftRadius: ScaleS(10),
    borderTopRightRadius: ScaleS(10),
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: ScaleS(45)
  },
  item: {
    justifyContent: 'center',
    alignItems: 'center'
  },
  itemImg: {
    width: ScaleS(44),
    height: ScaleS(44),
    resizeMode: 'cover',
    marginBottom: ScaleS(15)
  },
  itemText: {
    fontSize: ScaleS(12),
    color: '#666666'
  },
  lightText: {
    opacity: 0.5
  }
})
